// 会员列表
<template>
    <div>
        <div class="chatRoomBox">
            <div class="listCont">
                <div class="tableHead flex flex-align-center">
                    <div class="table-num flex flex-align-center"><p>序号</p></div>
                    <div class="table-user-name flex flex-align-center"><p>会员昵称</p></div>
                    <div class="table-user-userNx flex flex-align-center"><p>会员类型</p></div>
                    <div class="table-user-userxj flex flex-align-center">
                        <select @change="onChangeParent">
                        <option :value="$store.state.userInfo.id">所属上级</option>
                        <option :value="item.id" v-for='(item,index) in seclectData' :key='index'>{{item.text}}</option>
                        </select>
                    </div>
                    <div class="table-time flex flex-align-center"><p>注册时间</p></div>
                    <div class="table-user-userzt flex flex-align-center">
                        <select  @change='onChangeLogin'>
                            <option value="-1">登陆状态</option>
                            <option value="0">未登录</option>
                            <option value="1">已登录</option>
                        </select>
                    </div>
                    <div class="table-user-usercz flex flex-align-center"><p>操作</p></div>
                </div>
                <div class="tableCont">
                    <!-- 列表背景控制 tablecolor -->
                    <div class="tableHead flex flex-align-center" :class="{tablecolor: (index+1)%2 != 0}" v-for='(item,index) in userList' :key='index'>
                        <div class="table-num flex flex-align-center"><p>{{index+1}}</p></div>
                        <div class="table-user-name flex flex-align-center"><p>{{item.nickname}}</p></div>
                        <div class="table-user-userNx flex flex-align-center"><p>{{item.member_type}}</p></div>
                        <div class="table-user-userxj flex flex-align-center"><p>({{item.member_type}}){{item.parent_name}}</p></div>
                        <div class="table-time flex flex-align-center"><p>{{item.create_time}}</p></div>
                        <div class="table-user-userzt flex flex-align-center">
                            <p v-if='item.login_status == 1' class="suss">已登录</p>
                            <p v-if='item.login_status == 0' class="err">未登录</p>
                        </div>
                        <div class="table-user-usercz flex flex-align-center">
                            <img src="@/assets/img/chat-room/shizhong.png" alt="" @click="onChangeDateFun(item.id,item.nickname,item.use_end_time,item.member_type)">
                            <img class="copy-icon" src="@/assets/img/chat-room/copy-icon.png" @click="onCopyInfoFun(item.id)">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ModificationTimeWin :isWin='isWin' v-on:close="oncloseWin" :WinData='WinData'></ModificationTimeWin>
        <CopyWin :isWin='isCopyWin' :child='copy_WinData'  v-on:close="oncloseCopyWin"></CopyWin>
    </div>
</template>
<script>
import ModificationTimeWin from './modificationTimeWin'
import CopyWin from './copyWin'
export default {
    components: {
       ModificationTimeWin,
       CopyWin
    },
    data () {
        return {
           isWin:false, //控制修改使用时间窗口
           isCopyWin:false, //控制拷贝窗口
           seclectData:[], //下拉列表
           WinData:{},
           copy_WinData:{}
        }
    },
    mounted () {
        let uid = this.$store.state.userInfo.id;
        this.https('chat/postObtainSelectUserList',{uid:uid},'post')
        .then(data => {
            for(var i in data){
                data[i].text = data[i].member_type+'['+data[i].nickname+']';
            }
            this.seclectData=data;
        });
        this.$store.commit('setListstatusParent',uid);
         this.$store.commit('setListstatusLogin',-1);
        this.getNetUserList(uid,'',-1);
    },
    computed: {
        userList(){
            return this.$store.getters.getMembershiplist;
        }    
    },
    methods: { 
        onChangeParent(ele){ //筛选所属上级
            this.$store.commit('setListstatusParent',ele.target.value);
            let uid = this.$store.state.liststatus.parent_id;
            let login_status = this.$store.state.liststatus.login_status;
            this.getNetUserList(uid,'',login_status);
        },
        onChangeLogin(ele){ //通过登陆状态筛选
            this.$store.commit('setListstatusLogin',ele.target.value);
            let uid = this.$store.state.liststatus.parent_id;
            let login_status = this.$store.state.liststatus.login_status;
            this.getNetUserList(uid,'',login_status);
        },
        onChangeDateFun(id,nickname,use_end_time,member_type){ //修改使用时间
            use_end_time = this.format(use_end_time);
            this.WinData = {
                uid:id,
                nickname:nickname,
                use_end_time:use_end_time,
                member_type:member_type
            }
            this.isWin = true;

        },
        add0(m){return m<10?'0'+m:m },
        format(shijianchuo)
        {
            var time = new Date(shijianchuo*1000);
            var y = time.getFullYear();
            var m = time.getMonth()+1;
            var d = time.getDate();
            var h = time.getHours();
            var mm = time.getMinutes();
            var s = time.getSeconds();
            return y+'年'+this.add0(m)+'月'+this.add0(d)+'日';
        },
        onCopyInfoFun(id){ //拷贝用户信息  
            this.https('Chat/postObtainUserInfo',{user_id:id})
            .then(data =>{
                this.copy_WinData = data;
                this.isCopyWin = true;
            })
        },
        oncloseWin(){ //关闭修改时间窗口 
            this.isWin = false;
        },
        oncloseCopyWin(){ //关闭拷贝用户信息窗口
            this.isCopyWin = false;
        },
        getNetUserList(uid,keyword,login_status){ //获取列表数据
            this.https('chat/postObtainSubordinateUserList',{uid:uid,keyword:keyword,login_status:login_status},'post')
            .then(data => {
                this.$store.commit('setMembershiplist',data.list);
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import url(../../../assets/css/chatroom/chatroomlist.less);
</style>


